<template>
    <view class="content">
        <!-- {{ tabValue }}
        <pure-tabs :value="tabValue" @tabClick="handleTabClick" vertical>
            <pure-tabs-item v-for="(item, index) in list" :key="index" :value="item.id" :item="item"
                :disabled="item.disabled">
                <text class="tab">{{ item.name }}</text>
            </pure-tabs-item>
        </pure-tabs> -->

        <pure-elevator :list="list" :value="tabValue" @tabClick="handleTabClick" @tabChange="handleTabChange">
            <template #tabs>
                <!-- 这里建议用一个 view 组件进行包裹，因为在实际测试中，快手小程序如果不再包裹一层，会导致 provide/inject 的数据丢失 -->
                <view>
                    <pure-tabs :value="tabValue" @tabClick="handleTabClick" vertical>
                        <pure-tabs-item v-for="(item, index) in list" :key="index" :value="item.id" :item="item"
                            :disabled="item.disabled">
                            <text class="tab">{{ item.name }}</text>
                        </pure-tabs-item>
                    </pure-tabs>
                </view>
            </template>
            <pure-elevator-floor v-for="floor in list" :key="floor.id" :value="floor.id" :floor="floor">
                <view class="floor">
                    <view class="floor-title">{{ floor.name }}</view>
                    <view class="rooms">
                        <view class="room" v-for="room in floor.products" :key="room.id">{{ room.name }} </view>
                    </view>
                </view>
            </pure-elevator-floor>
        </pure-elevator>
    </view>
</template>

<script setup>
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";

// 模拟数据
const _list = [
    {
        id: 1,
        name: "手机数码",
        products: [
            { id: 1, name: "iPhone 14 Pro Max" },
            { id: 2, name: "华为 Mate 50" },
            { id: 3, name: "小米 13 Ultra" },
            { id: 4, name: "OPPO Find X6" },
            { id: 5, name: "vivo X90 Pro" },
            { id: 6, name: "三星 Galaxy S23" },
            { id: 7, name: "一加 11" },
            { id: 8, name: "荣耀 Magic5" },
            { id: 9, name: "红米 K60" },
            { id: 10, name: "realme GT Neo5" },
            { id: 11, name: "魅族 20" },
            { id: 12, name: "努比亚 Z50" },
            { id: 13, name: "索尼 Xperia 1 V" },
            { id: 14, name: "黑鲨 5 Pro" },
            { id: 15, name: "联想拯救者 Y90" },
            { id: 16, name: "华硕 ROG Phone 6" },
            { id: 17, name: "Google Pixel 7" },
            { id: 18, name: "诺基亚 X30" },
            { id: 19, name: "摩托罗拉 Edge 40" },
            { id: 20, name: "中兴 Axon 40 Ultra" },
        ],
    },
    {
        id: 2,
        name: "家用电器",
        products: [
            { id: 21, name: "海尔冰箱 BCD-520WDPD" },
            { id: 22, name: "美的空调 KFR-35GW" },
            { id: 23, name: "格力电风扇 FD-4010" },
            { id: 24, name: "西门子洗衣机 WM12P2602W" },
            { id: 25, name: "松下微波炉 NN-GT353M" },
            { id: 26, name: "九阳豆浆机 DJ13B-D08EC" },
            { id: 27, name: "苏泊尔电饭煲 CFXB40FC829-75" },
            { id: 28, name: "飞利浦空气净化器 AC3256" },
            { id: 29, name: "戴森吸尘器 V11" },
            { id: 30, name: "小熊电烤箱 DKX-A28A1" },
            { id: 31, name: "博世洗碗机 SMI46JS00C" },
            { id: 32, name: "东芝电视机 65M540F" },
            { id: 33, name: "夏普空气消毒机 FP-J80M-W" },
            { id: 34, name: "LG 滚筒洗衣机 FC1450S2W" },
            { id: 35, name: "三洋电热水器 F60-30B1" },
            { id: 36, name: "TCL 智能门锁 X7S" },
            { id: 37, name: "奥克斯电压力锅 YBD50-90A" },
            { id: 38, name: "惠而浦冰箱 BCD-542WMB" },
            { id: 39, name: "科沃斯扫地机器人 T10" },
            { id: 40, name: "艾美特电暖器 HC22132-W" },
        ],
    },
    {
        id: 3,
        name: "电脑办公",
        products: [
            { id: 41, name: "MacBook Pro 16寸" },
            { id: 42, name: "联想 ThinkPad X1 Carbon" },
            { id: 43, name: "戴尔 XPS 13" },
            { id: 44, name: "华硕 ROG 幻 16" },
            { id: 45, name: "惠普暗影精灵 8" },
            { id: 46, name: "微软 Surface Laptop 5" },
            { id: 47, name: "华为 MateBook X Pro" },
            { id: 48, name: "小米笔记本 Pro 15" },
            { id: 49, name: "雷神 911 Zero" },
            { id: 50, name: "机械革命 蛟龙 7" },
            { id: 51, name: "宏碁 暗影骑士 擎" },
            { id: 52, name: "神舟 战神 Z8" },
            { id: 53, name: "苹果 iMac 24寸" },
            { id: 54, name: "外星人 Alienware m15" },
            { id: 55, name: "微星 GS66 Stealth" },
            { id: 56, name: "荣耀 MagicBook 14" },
            { id: 57, name: "LG Gram 17" },
            { id: 58, name: "雷蛇 灵刃 15" },
            { id: 59, name: "技嘉 AORUS 15P" },
            { id: 60, name: "富士通 LIFEBOOK U9311" },
        ],
    },
    {
        id: 4,
        name: "运动户外",
        products: [
            { id: 61, name: "耐克 Air Max 270" },
            { id: 62, name: "阿迪达斯 Ultraboost 22" },
            { id: 63, name: "李宁 烈骏 6" },
            { id: 64, name: "安踏 霸道 3.0" },
            { id: 65, name: "彪马 RS-X" },
            { id: 66, name: "新百伦 574" },
            { id: 67, name: "亚瑟士 Gel-Kayano 28" },
            { id: 68, name: "斯凯奇 Go Walk 6" },
            { id: 69, name: "匡威 Chuck Taylor" },
            { id: 70, name: "Vans Old Skool" },
            { id: 71, name: "哥伦比亚 冲锋衣" },
            { id: 72, name: "北面 登山鞋" },
            { id: 73, name: "探路者 帐篷" },
            { id: 74, name: "骆驼 户外背包" },
            { id: 75, name: "迪卡侬 登山杖" },
            { id: 76, name: "凯乐石 冲锋裤" },
            { id: 77, name: "奥索卡 睡袋" },
            { id: 78, name: "狼爪 户外手套" },
            { id: 79, name: "始祖鸟 软壳衣" },
            { id: 80, name: "萨洛蒙 越野跑鞋" },
        ],
    },
    {
        id: 5,
        name: "美妆护肤",
        products: [
            { id: 81, name: "雅诗兰黛小棕瓶精华" },
            { id: 82, name: "兰蔻小黑瓶眼霜" },
            { id: 83, name: "SK-II 神仙水" },
            { id: 84, name: "欧莱雅复颜抗皱套装" },
            { id: 85, name: "资生堂红腰子精华" },
            { id: 86, name: "倩碧黄油乳液" },
            { id: 87, name: "科颜氏高保湿面霜" },
            { id: 88, name: "玉兰油多效修护霜" },
            { id: 89, name: "赫莲娜绿宝瓶精华" },
            { id: 90, name: "娇韵诗双萃精华" },
            { id: 91, name: "雪花秀滋盈套装" },
            { id: 92, name: "悦木之源菌菇水" },
            { id: 93, name: "黛珂紫苏水" },
            { id: 94, name: "海蓝之谜面霜" },
            { id: 95, name: "香奈儿山茶花洗面奶" },
            { id: 96, name: "迪奥烈艳蓝金唇膏" },
            { id: 97, name: "YSL 小金条口红" },
            { id: 98, name: "阿玛尼权力粉底液" },
            { id: 99, name: "纪梵希四宫格散粉" },
            { id: 100, name: "MAC 子弹头口红" },
        ],
    },
    {
        id: 6,
        name: "母婴用品",
        products: [
            { id: 101, name: "帮宝适纸尿裤" },
            { id: 102, name: "花王妙而舒纸尿裤" },
            { id: 103, name: "好奇铂金装纸尿裤" },
            { id: 104, name: "贝亲奶瓶" },
            { id: 105, name: "飞鹤星飞帆奶粉" },
            { id: 106, name: "美赞臣蓝臻奶粉" },
            { id: 107, name: "惠氏启赋奶粉" },
            { id: 108, name: "爱他美奶粉" },
            { id: 109, name: "好孩子婴儿推车" },
            { id: 110, name: "Britax 安全座椅" },
            { id: 111, name: "Babycare 湿巾" },
            { id: 112, name: "可优比婴儿床" },
            { id: 113, name: "小白熊恒温调奶器" },
            { id: 114, name: "新安怡吸奶器" },
            { id: 115, name: "NUK 安抚奶嘴" },
            { id: 116, name: "全棉时代婴儿棉柔巾" },
            { id: 117, name: "贝亲婴儿洗发水" },
            { id: 118, name: "强生婴儿润肤露" },
            { id: 119, name: "子初产妇护理垫" },
            { id: 120, name: "十月结晶待产包" },
        ],
    },
    {
        id: 7,
        name: "食品饮料",
        products: [
            { id: 121, name: "蒙牛纯牛奶" },
            { id: 122, name: "伊利金典有机奶" },
            { id: 123, name: "可口可乐" },
            { id: 124, name: "百事可乐" },
            { id: 125, name: "农夫山泉矿泉水" },
            { id: 126, name: "康师傅红烧牛肉面" },
            { id: 127, name: "统一老坛酸菜面" },
            { id: 128, name: "三只松鼠坚果礼盒" },
            { id: 129, name: "良品铺子零食大礼包" },
            { id: 130, name: "旺旺雪饼" },
            { id: 131, name: "奥利奥夹心饼干" },
            { id: 132, name: "德芙巧克力" },
            { id: 133, name: "费列罗巧克力" },
            { id: 134, name: "乐事薯片" },
            { id: 135, name: "好丽友派" },
            { id: 136, name: "王老吉凉茶" },
            { id: 137, name: "加多宝凉茶" },
            { id: 138, name: "红牛功能饮料" },
            { id: 139, name: "雀巢咖啡" },
            { id: 140, name: "星巴克即饮咖啡" },
        ],
    },
    {
        id: 8,
        name: "家居日用",
        products: [
            { id: 141, name: "洁柔抽纸" },
            { id: 142, name: "维达卷纸" },
            { id: 143, name: "清风湿巾" },
            { id: 144, name: "蓝月亮洗衣液" },
            { id: 145, name: "奥妙洗衣粉" },
            { id: 146, name: "立白洗洁精" },
            { id: 147, name: "威猛先生厨房清洁剂" },
            { id: 148, name: "花王魔术灵" },
            { id: 149, name: "3M 百洁布" },
            { id: 150, name: "妙洁保鲜膜" },
            { id: 151, name: "乐扣乐扣保鲜盒" },
            { id: 152, name: "双立人菜刀" },
            { id: 153, name: "苏泊尔炒锅" },
            { id: 154, name: "爱仕达压力锅" },
            { id: 155, name: "美的电热水壶" },
            { id: 156, name: "九阳豆浆机" },
            { id: 157, name: "小熊电炖盅" },
            { id: 158, name: "飞利浦电动牙刷" },
            { id: 159, name: "欧乐B 牙刷头" },
            { id: 160, name: "舒客牙膏" },
        ],
    },
    {
        id: 9,
        name: "服饰鞋包",
        products: [
            { id: 161, name: "优衣库男士衬衫" },
            { id: 162, name: "ZARA 女士连衣裙" },
            { id: 163, name: "H&M 休闲裤" },
            { id: 164, name: "耐克运动鞋" },
            { id: 165, name: "阿迪达斯跑步鞋" },
            { id: 166, name: "新百伦复古鞋" },
            { id: 167, name: "李宁篮球鞋" },
            { id: 168, name: "安踏儿童鞋" },
            { id: 169, name: "彪马休闲鞋" },
            { id: 170, name: "匡威帆布鞋" },
            { id: 171, name: "Vans 经典款" },
            { id: 172, name: "哥伦比亚冲锋衣" },
            { id: 173, name: "北面登山包" },
            { id: 174, name: "探路者户外鞋" },
            { id: 175, name: "骆驼登山鞋" },
            { id: 176, name: "迪卡侬运动袜" },
            { id: 177, name: "凯乐石抓绒衣" },
            { id: 178, name: "奥索卡速干裤" },
            { id: 179, name: "狼爪户外帽" },
            { id: 180, name: "始祖鸟软壳裤" },
        ],
    },
    {
        id: 10,
        name: "图书音像",
        products: [
            { id: 181, name: "《活着》余华" },
            { id: 182, name: "《百年孤独》加西亚·马尔克斯" },
            { id: 183, name: "《三体》刘慈欣" },
            { id: 184, name: "《平凡的世界》路遥" },
            { id: 185, name: "《解忧杂货店》东野圭吾" },
            { id: 186, name: "《小王子》圣埃克苏佩里" },
            { id: 187, name: "《追风筝的人》卡勒德·胡赛尼" },
            { id: 188, name: "《白夜行》东野圭吾" },
            { id: 189, name: "《哈利·波特与魔法石》J.K.罗琳" },
            { id: 190, name: "《人类简史》尤瓦尔·赫拉利" },
            { id: 191, name: "《未来简史》尤瓦尔·赫拉利" },
            { id: 192, name: "《时间简史》史蒂芬·霍金" },
            { id: 193, name: "《明朝那些事儿》当年明月" },
            { id: 194, name: "《红楼梦》曹雪芹" },
            { id: 195, name: "《西游记》吴承恩" },
            { id: 196, name: "《水浒传》施耐庵" },
            { id: 197, name: "《三国演义》罗贯中" },
            { id: 198, name: "《史记》司马迁" },
            { id: 199, name: "《论语》孔子" },
            { id: 200, name: "《道德经》老子" },
        ],
    },
    {
        id: 11,
        name: "宠物用品",
        products: [
            { id: 201, name: "皇家猫粮" },
            { id: 202, name: "渴望狗粮" },
            { id: 203, name: "麦富迪宠物零食" },
            { id: 204, name: "福来恩驱虫药" },
            { id: 205, name: "拜耳驱虫药" },
            { id: 206, name: "小佩猫砂盆" },
            { id: 207, name: "pidan 猫砂" },
            { id: 208, name: "霍曼宠物饮水机" },
            { id: 209, name: "多格漫宠物玩具" },
            { id: 210, name: "zeze 猫爬架" },
            { id: 211, name: "伊丽莎白圈" },
            { id: 212, name: "宠物指甲剪" },
            { id: 213, name: "宠物梳子" },
            { id: 214, name: "宠物牵引绳" },
            { id: 215, name: "宠物背包" },
            { id: 216, name: "宠物窝" },
            { id: 217, name: "宠物衣服" },
            { id: 218, name: "宠物项圈" },
            { id: 219, name: "宠物湿巾" },
            { id: 220, name: "宠物沐浴露" },
        ],
    },
    {
        id: 12,
        name: "汽车用品",
        products: [
            { id: 221, name: "3M 汽车贴膜" },
            { id: 222, name: "博世雨刷" },
            { id: 223, name: "米其林轮胎" },
            { id: 224, name: "固特异轮胎" },
            { id: 225, name: "嘉实多机油" },
            { id: 226, name: "美孚机油" },
            { id: 227, name: "壳牌机油" },
            { id: 228, name: "车仆玻璃水" },
            { id: 229, name: "龟牌洗车液" },
            { id: 230, name: "车载充电器" },
            { id: 231, name: "行车记录仪" },
            { id: 232, name: "车载空气净化器" },
            { id: 233, name: "车载冰箱" },
            { id: 234, name: "汽车脚垫" },
            { id: 235, name: "汽车座垫" },
            { id: 236, name: "汽车香水" },
            { id: 237, name: "车载吸尘器" },
            { id: 238, name: "汽车遮阳挡" },
            { id: 239, name: "汽车应急包" },
            { id: 240, name: "汽车工具箱" },
        ],
    },
    {
        id: 13,
        name: "珠宝首饰",
        products: [
            { id: 241, name: "周大福黄金项链" },
            { id: 242, name: "周生生钻石戒指" },
            { id: 243, name: "六福珠宝珍珠耳环" },
            { id: 244, name: "老凤祥翡翠手镯" },
            { id: 245, name: "谢瑞麟铂金戒指" },
            { id: 246, name: "潮宏基彩金手链" },
            { id: 247, name: "潘多拉银饰手链" },
            { id: 248, name: "施华洛世奇水晶项链" },
            { id: 249, name: "蒂芙尼蓝宝石戒指" },
            { id: 250, name: "卡地亚玫瑰金手镯" },
            { id: 251, name: "宝格丽陶瓷戒指" },
            { id: 252, name: "梵克雅宝四叶草项链" },
            { id: 253, name: "伯爵钻石耳钉" },
            { id: 254, name: "萧邦快乐钻石手链" },
            { id: 255, name: "海瑞温斯顿祖母绿戒指" },
            { id: 256, name: "尚美巴黎钻戒" },
            { id: 257, name: "格拉夫钻石项链" },
            { id: 258, name: "宝诗龙珍珠耳环" },
            { id: 259, name: "麒麟翡翠手镯" },
            { id: 260, name: "金至尊黄金手链" },
        ],
    },
    {
        id: 14,
        name: "玩具乐器",
        products: [
            { id: 261, name: "乐高积木" },
            { id: 262, name: "芭比娃娃" },
            { id: 263, name: "变形金刚玩具" },
            { id: 264, name: "遥控赛车" },
            { id: 265, name: "拼图玩具" },
            { id: 266, name: "儿童电子琴" },
            { id: 267, name: "尤克里里" },
            { id: 268, name: "吉他" },
            { id: 269, name: "钢琴" },
            { id: 270, name: "小提琴" },
            { id: 271, name: "架子鼓" },
            { id: 272, name: "口琴" },
            { id: 273, name: "二胡" },
            { id: 274, name: "古筝" },
            { id: 275, name: "笛子" },
            { id: 276, name: "萨克斯" },
            { id: 277, name: "手风琴" },
            { id: 278, name: "竖笛" },
            { id: 279, name: "非洲鼓" },
            { id: 280, name: "电子鼓" },
        ],
    },
    {
        id: 15,
        name: "办公设备",
        products: [
            { id: 281, name: "惠普激光打印机" },
            { id: 282, name: "佳能喷墨打印机" },
            { id: 283, name: "爱普生扫描仪" },
            { id: 284, name: "兄弟标签打印机" },
            { id: 285, name: "富士施乐复印机" },
            { id: 286, name: "得力碎纸机" },
            { id: 287, name: "科密考勤机" },
            { id: 288, name: "联想投影仪" },
            { id: 289, name: "明基显示器" },
            { id: 290, name: "罗技无线鼠标" },
            { id: 291, name: "雷柏键盘" },
            { id: 292, name: "戴尔台式电脑" },
            { id: 293, name: "华硕笔记本电脑" },
            { id: 294, name: "苹果 Mac Mini" },
            { id: 295, name: "小米路由器" },
            { id: 296, name: "华为企业级交换机" },
            { id: 297, name: "TP-Link 无线AP" },
            { id: 298, name: "飞利浦会议电话" },
            { id: 299, name: "索尼录音笔" },
            { id: 300, name: "松下传真机" },
        ],
    },
    {
        id: 16,
        name: "健身器材",
        products: [
            { id: 301, name: "跑步机" },
            { id: 302, name: "动感单车" },
            { id: 303, name: "椭圆机" },
            { id: 304, name: "划船机" },
            { id: 305, name: "哑铃套装" },
            { id: 306, name: "杠铃" },
            { id: 307, name: "瑜伽垫" },
            { id: 308, name: "跳绳" },
            { id: 309, name: "仰卧起坐板" },
            { id: 310, name: "引体向上器" },
            { id: 311, name: "健腹轮" },
            { id: 312, name: "拉力器" },
            { id: 313, name: "拳击沙袋" },
            { id: 314, name: "健身球" },
            { id: 315, name: "踏步机" },
            { id: 316, name: "俯卧撑支架" },
            { id: 317, name: "臂力器" },
            { id: 318, name: "握力器" },
            { id: 319, name: "筋膜枪" },
            { id: 320, name: "健身手套" },
        ],
    },
    {
        id: 17,
        name: "户外运动",
        products: [
            { id: 321, name: "登山杖" },
            { id: 322, name: "帐篷" },
            { id: 323, name: "睡袋" },
            { id: 324, name: "户外炊具" },
            { id: 325, name: "冲锋衣" },
            { id: 326, name: "登山鞋" },
            { id: 327, name: "户外背包" },
            { id: 328, name: "头灯" },
            { id: 329, name: "指南针" },
            { id: 330, name: "户外水壶" },
            { id: 331, name: "折叠椅" },
            { id: 332, name: "野餐垫" },
            { id: 333, name: "户外急救包" },
            { id: 334, name: "防晒霜" },
            { id: 335, name: "驱蚊液" },
            { id: 336, name: "户外手表" },
            { id: 337, name: "望远镜" },
            { id: 338, name: "钓鱼竿" },
            { id: 339, name: "骑行头盔" },
            { id: 340, name: "滑雪板" },
        ],
    },
    {
        id: 18,
        name: "数码配件",
        products: [
            { id: 341, name: "手机壳" },
            { id: 342, name: "钢化膜" },
        ],
    },
    {
        id: 19,
        name: "礼品鲜花",
        products: [
            { id: 361, name: "玫瑰花束" },
            { id: 362, name: "康乃馨花篮" },
        ],
    },
    {
        id: 20,
        name: "健康保健",
        products: [
            { id: 381, name: "维生素C" },
            { id: 382, name: "鱼油软胶囊" },
            { id: 383, name: "钙片" },
            { id: 384, name: "蛋白粉" },
            { id: 385, name: "益生菌" },
        ],
    },
];

// ####################################################################################################
// 基础使用
const list = ref([]);
const tabValue = ref(2);

// 初始化数据
onReady(() => {
    initList();
});

// 左侧标签点击事件
function handleTabClick(item) {
    console.log("左侧标签点击事件", item);
    // 更新对应下标
    tabValue.value = item.id;
}

// 左侧标签切换事件
// 主要用于自定义 tabs 用来切换选中项
function handleTabChange(value) {
    // 更新对应下标
    tabValue.value = value;
}

// 初始化数据
function initList() {
    list.value = _list;
}
</script>

<style scoped>
.content {
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    padding: 20px 20px;
    box-sizing: border-box;
}

.container {
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab {
    padding: 1em;
    box-sizing: border-box;
}

.floor-title {
    background: var(--pure-theme-primary);
    box-sizing: border-box;
    padding: 0 20px;
    color: #ffffff;
    font-weight: 700;
    position: sticky;
    z-index: 10;
    top: 0;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.rooms {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
}

.room {
    background: var(--pure-background-element);
    padding: 20px;
}

.floor:last-child .rooms {
    padding-bottom: 0;
}
</style>
